import React, { FC } from 'react'
import { Outlet } from 'react-router-dom'
// Outlet 是应在父路由元素中使用<Outlet> 来呈现其子路由元素 呈现路由中的子元素
import { Layout } from 'antd'
import Logo from '../components/Logo'
import UserInfo from '../components/UserInfo'
import useLoadUserData from '../hooks/useLoadUserData'
import styles from './index.module.scss'
const { Header, Content, Footer } = Layout

const MainLayout: FC = () => {
  const { waitingUserData } = useLoadUserData()
  return (
    <Layout>
      <Header className={styles.mainLayoutHeader}>
        <div className={styles.headerLeft}>
          <Logo />
        </div>
        <div className={styles.headerRight}>
          <UserInfo />
        </div>
      </Header>
      <Layout className={styles.mainLayoutContent}>
        <Content>
          {!waitingUserData && <Outlet />}
        </Content>
      </Layout>
      <Footer className={styles.mainLayoutFooter}>小刘问卷 &copy;2023 - present. Created by 小刘</Footer>
    </Layout>
  )
}

export default MainLayout